<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>AI文本助手</title>
  <style>
    body {
      width: 520px;
      min-height: 500px;
      padding: 20px;
      margin: 0;
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
      background-color: #f5f5f5;
      color: #333;
      box-sizing: border-box;
    }
    
    .container {
      display: flex;
      flex-direction: column;
      gap: 15px;
      width: 100%;
      box-sizing: border-box;
    }
    
    .title {
      text-align: center;
      color: #333;
      margin: 0 0 10px 0;
      font-size: 1.5em;
      font-weight: 500;
    }
    
    .selected-text-container,
    .operation-container,
    .language-container,
    .api-key-container,
    .button-container,
    .result-container,
    .error-container {
      display: flex;
      flex-direction: column;
      width: 100%;
      box-sizing: border-box;
    }
    
    label {
      font-weight: 600;
      margin-bottom: 5px;
      color: #555;
      font-size: 0.9em;
    }
    
    .selected-text {
      width: 100%;
      min-height: 80px;
      max-height: 120px;
      padding: 8px 12px;
      border: 1px solid #ddd;
      border-radius: 6px;
      resize: vertical;
      font-size: 14px;
      background-color: #fff;
      box-sizing: border-box;
      transition: border-color 0.2s;
    }
    
    .selected-text:focus {
      outline: none;
      border-color: #4285f4;
      box-shadow: 0 0 0 2px rgba(66, 133, 244, 0.2);
    }
    
    .operation-select,
    .language-select,
    .api-key-input {
      width: 100%;
      padding: 8px 12px;
      border: 1px solid #ddd;
      border-radius: 6px;
      font-size: 14px;
      background-color: #fff;
      box-sizing: border-box;
      transition: border-color 0.2s;
    }
    
    .operation-select:focus,
    .language-select:focus,
    .api-key-input:focus {
      outline: none;
      border-color: #4285f4;
      box-shadow: 0 0 0 2px rgba(66, 133, 244, 0.2);
    }
    
    .process-btn {
      width: 100%;
      padding: 12px;
      background-color: #4285f4;
      color: white;
      border: none;
      border-radius: 6px;
      cursor: pointer;
      font-size: 16px;
      font-weight: 500;
      transition: background-color 0.3s, transform 0.1s;
      box-sizing: border-box;
    }
    
    .process-btn:hover {
      background-color: #3367d6;
    }
    
    .process-btn:active {
      transform: scale(0.98);
    }
    
    .process-btn:disabled {
      background-color: #ccc;
      cursor: not-allowed;
      transform: none;
    }
    
    .result-text {
      width: 100%;
      min-height: 120px;
      max-height: 200px;
      padding: 12px;
      border: 1px solid #ddd;
      border-radius: 6px;
      background-color: #fff;
      white-space: pre-wrap;
      word-wrap: break-word;
      font-size: 14px;
      overflow-y: auto;
      box-sizing: border-box;
    }
    
    .loading {
      text-align: center;
      padding: 30px;
      color: #666;
      font-style: italic;
      width: 100%;
    }
    
    .hidden {
      display: none;
    }
    
    .error-message {
      padding: 12px;
      background-color: #ffebee;
      color: #c62828;
      border: 1px solid #ffcdd2;
      border-radius: 6px;
      font-size: 14px;
      width: 100%;
      box-sizing: border-box;
    }
    
    /* 深色模式支持 */
    @media (prefers-color-scheme: dark) {
      body {
        background-color: #202124;
        color: #e8eaed;
      }
      
      .title {
        color: #e8eaed;
      }
      
      label {
        color: #9aa0a6;
      }
      
      .selected-text,
      .operation-select,
      .language-select,
      .api-key-input,
      .result-text {
        background-color: #303134;
        border-color: #5f6368;
        color: #e8eaed;
      }
      
      .selected-text:focus,
      .operation-select:focus,
      .language-select:focus,
      .api-key-input:focus {
        border-color: #8ab4f8;
        box-shadow: 0 0 0 2px rgba(138, 180, 248, 0.2);
      }
      
      .error-message {
        background-color: #3b2e33;
        border-color: #5d4047;
        color: #f28b82;
      }
    }
  </style>
</head>
<body>
  <div class="container">
    <h1 class="title">AI文本助手</h1>

    <!-- 选中的文本 -->
    <div class="selected-text-container">
      <label for="selectedText">选中的文本:</label>
      <textarea id="selectedText" class="selected-text" readonly></textarea>
    </div>

    <!-- 操作选择 -->
    <div class="operation-container">
      <label for="operation">选择操作:</label>
      <select id="operation" class="operation-select">
        <option value="translate">翻译</option>
        <option value="explain">解释</option>
        <option value="summarize">摘要</option>
        <option value="expand">扩展</option>
      </select>
    </div>

    <!-- 目标语言选择 -->
    <div class="language-container" id="languageContainer">
      <label for="targetLanguage">目标语言:</label>
      <select id="targetLanguage" class="language-select">
        <option value="zh">中文</option>
        <option value="en">英语</option>
        <option value="ja">日语</option>
        <option value="ko">韩语</option>
        <option value="fr">法语</option>
        <option value="de">德语</option>
      </select>
    </div>

    <!-- API密钥输入 -->
    <div class="api-key-container">
      <label for="apiKey">API密钥:</label>
      <input type="password" id="apiKey" class="api-key-input" placeholder="请输入您的API密钥">
    </div>

    <!-- 操作按钮 -->
    <div class="button-container">
      <button id="processBtn" class="process-btn">处理</button>
    </div>

    <!-- 结果展示 -->
    <div class="result-container" id="resultContainer">
      <label for="result">结果:</label>
      <div id="result" class="result-text"></div>
      <div id="loading" class="loading hidden">处理中...</div>
    </div>

    <!-- 错误信息 -->
    <div class="error-container" id="errorContainer">
      <div id="error" class="error-message"></div>
    </div>
  </div>
  
  <!-- 引入模块 -->
  <script src="js/utils.js"></script>
  <script src="js/api.js"></script>
  <script src="js/storage.js"></script>
  <script src="js/popup.js"></script>
</body>
</html>